<template>
  <div class="container">
    <div v-for="n in 10" v-slide="{ a: 1, b: 2 }" class="item">{{ n }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .item {
    width: 500px;
    height: 300px;
    margin-bottom: 50px;
    border-radius: 6px;
    box-shadow: 2px 2px 4px 1px rgba($color: #000000, $alpha: 0.6);

    &:nth-child(1) {
      background-color: red;
    }

    &:nth-child(2) {
      background-color: orange;
    }

    &:nth-child(3) {
      background-color: yellow;
    }

    &:nth-child(4) {
      background-color: green;
    }

    &:nth-child(5) {
      background-color: skyblue;
    }

    &:nth-child(6) {
      background-color: blue;
    }

    &:nth-child(7) {
      background-color: purple;
    }

    &:nth-child(8) {
      background-color: gold;
    }

    &:nth-child(9) {
      background-color: pink;
    }

    &:nth-child(10) {
      background-color: gray;
    }
  }
}
</style>
